<script setup lang='ts'>
  import { onMounted, reactive, ref } from 'vue';
  import { contentApi } from '@/api/controller';
  import { getHMMSS } from '@/utils';
  import { ToastSuccess, Toastloading } from '@/utils/public';
  import { ElMessageBox } from 'element-plus';
  import xmImage from '@/components/xmImage/index.vue'
  import screenForm from './screenForm.vue';
  const screenFormRef = ref();
  const action = reactive({
    list:[] as any[],
    screenPages:[] as Array<any>,
  })
  const handelOpenForm = (row:any = {})=>{
    screenFormRef.value.openDialog({
      ...row,
      screenPages:action.screenPages
    })
  }
  const handleDelete = (row:any = {})=>{
    ElMessageBox.confirm("确定删除此飘萍吗?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
    .then(async () => {
      const loading = Toastloading();
      await contentApi.screenListDel({
        id:row.id
      });
      loading.close();
      ToastSuccess("删除成功!");
      getList();
    })
    .catch(() => {});
  }
  const getPageText = (scoped:any = {})=>{
    const { $index=-1, row={} } = scoped
    if($index < 0) return
    const { show_pages='' } = row
    let cont = []
    let arr = [] as Array<any>
    if(typeof(show_pages) == 'string' && show_pages) {
      arr = show_pages.split(',');
      for(let item of arr) {
        let text = action.screenPages[item]
        if(text) {
          cont.push(action.screenPages[item])
        }
      }
    }
    return cont.toString()
  }
  const getScreenPage = async()=>{
    const res = await contentApi.getScreenPage()
    const { data=[] } = res
    action.screenPages = data
  }
  const getList = async()=> {
    const loading = Toastloading()
    const res = await contentApi.screenList()
    loading.close()
    const { data=[]} = res
    action.list = data
  }
  onMounted(()=>{
    getScreenPage()
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <el-button type="primary" @click="handelOpenForm()">新增</el-button>
    </div>
    <el-table
      class="xm-main xm-TableCenter"
      :data="action.list"
      border>
      <el-table-column width="80" prop="id" label="ID" />
      <el-table-column min-width="180" prop="name" label="名称" />
      <el-table-column width="180" prop="bg_img_url" label="图片">
        <template #default="scoped">
          <xmImage
            :src="scoped.row.bg_img_url"
            :list="[scoped.row.bg_img_url]"
          />
        </template>
      </el-table-column>
      <el-table-column width="120" prop="action_img_url" label="跳转图片">
        <template #default="scoped">
          <xmImage
            :src="scoped.row.action_img_url"
            :list="[scoped.row.action_img_url]"
          />
        </template>
      </el-table-column>
      <el-table-column min-width="200" prop="action" label="跳转地址" />
      <el-table-column min-width="120" prop="room_ids" label="房间ID" />
      <el-table-column min-width="200" prop="text" label="飘屏文案" />
      <el-table-column min-width="200" prop="show_pages" label="展示位置">
        <template #default="scoped">
          {{getPageText(scoped)}}
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="180" label="操作">
        <template #default="scoped">
          <el-button type="primary" @click="handelOpenForm(scoped.row)">编辑</el-button>
          <el-button v-if="scoped.row.status!='deleted'" type="danger" @click="handleDelete(scoped.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <screenForm ref="screenFormRef" @update-list="getList" />
  </div>
</template>